<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>柏拉图</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="柏拉图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/chart-import.js"></script>
<style type="text/css">
html, body {height: 100%;}
.chart_container{width: calc(100% - 20px); height: calc(100% - 30px); padding: 20px 10px 10px 10px;}
#chart{width: 100%; height: 100%;}
</style>
</head>
<body id="plato">
<div class="chart_container">
	<div id="chart"></div>
</div>
</body>
<script type="text/javascript">

var vm = new Vue({
	el: "#plato",
	data: {
		ckConfig: {},
		badType: {},	//不良种类
		badTotal: 0,	//不良总数
		sampleData: [],
		myChart: null
	},
	init: function() {
		var _self = this;
		this.$nextTick(function() {
			_self.getChartData(_self);
		});
	},
	methods: {
		renderChart: function(_self, data) {
			var xAxisData = [];
			var sLineData = [];
			var sBarData = [];
			var badType = _self.badType;
			var sum = 0;
			$.each(badType, function(k, v) {
				xAxisData.push(v);
				var count = 0;
				$.each(data, function(i, a) {
					var cnt =  a["badValue_" + k] * 1;
					if(!_.isNaN(cnt) && _.isNumber(cnt)){
						count += cnt;
					}
				});
				sBarData.push(count);
				sum += count;
				var rate = _.round(sum * 100.0 / _self.badTotal, 2);
				sLineData.push(rate);
			});
			var option = {
				tooltip: {
					show: true,
					trigger: "axis"
				},
				grid: {
					right: '100px'
				},
				xAxis: [{
					type: "category",
					axisTick: {
						alignWithLabel: true
					},
					data: xAxisData
				}],
				yAxis: [{
					type : "value",
					name: "数量",
					splitLine: {
						show: false
					}
				},{
					type : "value",
					name: "比率(%)",
					splitLine: {
						show: false
					}
				}],
				dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
				series: [{
					type: "bar",
					data: sBarData,
					yAxisIndex: 0,
					lineStyle: {
						color: "#4876FF"
					}
				},{
					type: "line",
					data: sLineData,
					yAxisIndex: 1,
					itemStyle: {
						color: "#4876FF"
					}
				}]
					
			};
			_self.myChart = echarts.init(document.getElementById('chart'));
			_self.myChart.setOption(option);
		},
		resizeChart: function() {
			this.myChart.resize();
		},
		getChartData: function(_self) {
			_self.sampleData = $.extend([], window.parent.vm.sampleData);
			_self.ckConfig = window.parent.vm.ckConfig;
			_self.badType = window.parent.vm.badType;
			_self.badTotal = window.parent.vm.badTotal;
			_self.renderChart(_self, _self.sampleData);
		}
	}
});
</script>
</html>